<%--
  Created by IntelliJ IDEA.
  Rent: XBB
  Date: 2021/2/18
  Time: 14:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layuicms/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layuicms/css/public.css" media="all" />
</head>
<body>
<div style="padding: 10px">

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>汽车出租</legend>
    </fieldset>
    <form class="layui-form" method="post" id="searchFrm">

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">身份证号:</label>
                <div class="layui-input-inline" style="padding: 5px">
                    <input type="text" name="identity" id="identity" autocomplete="off" class="layui-input layui-input-inline"
                           placeholder="请输入身份证号" style="height: 30px;border-radius: 10px">
                </div>
            </div>

            <div class="layui-inline" style="text-align: center">
                <button type="button"
                        class="layui-btn layui-btn-normal layui-icon layui-icon-search layui-btn-radius layui-btn-sm"
                        lay-submit  lay-filter="doSearch" style="margin-top: 4px">查询
                </button>
                <button type="reset"
                        class="layui-btn layui-btn-warm layui-icon layui-icon-refresh layui-btn-radius layui-btn-sm"
                        style="margin-top: 4px">重置
                </button>
            </div>
        </div>

    </form>

    <table id="rentTable" lay-filter="rentTableFilter"></table>
</div>

<script id="barrent" type="text/html">
    <a class="layui-btn layui-btn-xs layui-btn-radius" lay-event="rentCar">出租汽车</a>
    <a class="layui-btn layui-btn-xs layui-btn-radius" lay-event="viewImg">查看汽车大图</a>
</script>

<!-- 添加和修改的弹出层开始 -->
<div style="display: none;padding: 20px" id="saveOrUpdateDiv">
    <form class="layui-form layui-row layui-col-space10" lay-filter="dataFrm" id="dataFrm">
        <div class="layui-col-md12 layui-col-xs12">
            <div class="layui-form-item ">
                <div class="layui-inline">
                    <label class="layui-form-label">起租时间:</label>
                    <div class="layui-input-block" style="padding: 5px">
                        <input type="text" name="beginDate" id="beginDate" autocomplete="off" class="layui-input"
                               lay-verify="required"
                               placeholder="请输入租车时间" style="height: 30px;border-radius: 10px">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">还车时间:</label>
                    <div class="layui-input-block" style="padding: 5px">
                        <input type="text" name="returnDate" id="returnDate" autocomplete="off" class="layui-input"
                               placeholder="请输入换车时间" style="height: 30px;border-radius: 10px">
                    </div>
                </div>
            </div>

            <div class="layui-form-item ">
                <label class="layui-form-label">出租单号:</label>
                <div class="layui-input-block" style="padding: 5px">
                    <input type="text" name="rentId" autocomplete="off" class="layui-input"
                           placeholder="请输入出租单号" style="height: 30px;border-radius: 10px">
                </div>
            </div>

            <div class="layui-form-item ">
                <label class="layui-form-label">身份证号:</label>
                <div class="layui-input-block" style="padding: 5px">
                    <input type="text" name="identity" id="identity1" autocomplete="off" class="layui-input"
                           placeholder="请输入身份证号" style="height: 30px;border-radius: 10px">
                </div>
            </div>
            <div class="layui-form-item ">
                <div class="layui-inline">
                    <label class="layui-form-label">车牌号:</label>
                    <div class="layui-input-block" style="padding: 5px">
                        <input type="text" name="carNumber" class="layui-input" lay-verify="required"
                               placeholder="请输入车牌号" style="height: 30px;border-radius: 10px">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">出租价格:</label>
                    <div class="layui-input-block" style="padding: 5px">
                        <input type="text" name="price" class="layui-input" lay-verify="required|number"
                               placeholder="请输入车辆出租价格" style="height: 30px;border-radius: 10px">
                    </div>
                </div>
            </div>

            <div class="layui-form-item ">
                <label class="layui-form-label">操作员:</label>
                <div class="layui-input-block" style="padding: 5px">
                    <input type="text" name="openName" autocomplete="off" class="layui-input"
                           placeholder="请输入操作员" style="height: 30px;border-radius: 10px">
                </div>
            </div>
            <div class="layui-form-item ">
                <div class="layui-input-block" style="text-align: center;padding-right: 120px">
                    <button type="button"
                            class="layui-btn layui-btn-normal layui-btn-md layui-icon layui-icon-release layui-btn-radius"
                            lay-filter="doSubmit" lay-submit="">提交
                    </button>
                    <button type="reset"
                            class="layui-btn layui-btn-warm layui-btn-md layui-icon layui-icon-refresh layui-btn-radius">
                        重置
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

<input type="hidden" id="loginUsername" value="${session_user.realName}">
<script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
<script>

    var rentTab;
    var rentIndex;
    var title;

    layui.use(['form','layer','jquery','table','upload','laydate'],function() {
        var form = layui.form, layer = layui.layer, $ = layui.jquery,table = layui.table,upload = layui.upload,laydate = layui.laydate;

        function initCarData(){
            rentTab = table.render({
                elem:"#rentTable"
                ,url:"${pageContext.request.contextPath}/business/car/carRightJson?isRenting=0"
                ,title:"车辆列表"
                ,cols:[[
                    {field:'carNumber',title:'车牌号',align:"center",sort:true}
                    ,{field:'carType',title:'汽车类型',align:"center"}
                    ,{field:'color',title:'颜色',align:"center"}
                    ,{field:'price',title:'购买价格',align:"center"}
                    ,{field:'rentPrice',title:'出租价格',align:"center"}
                    ,{field:'deposit',title:'押金',align:"center"}
                    ,{field:'isRenting',title:'是否出租',align:"center",templet:function (r) {
                            return r.isRenting == 1 ? "已出租":"未出租";
                        }}
                    ,{field:'description',title:'相关描述',align:"center"}
                    ,{field:'carImg',title:'汽车图片',align:"center"}
                    ,{field:'createTime',title:'创建时间',align:"center"}
                    ,{fixed:'right',title:'操作',align:"center",toolbar:'#barrent',minWidth:200}
                ]]
                ,page:true
                ,limit:[5,10,15]
                ,limit:5
            })
        }

        //给查询按钮添加事件
        form.on('submit(doSearch)',function (data) {
            var identity = $("#identity").val()
            $.post("${pageContext.request.contextPath}/business/rent/checkCustomer",{"identity":identity},function (r) {
                if(r.code == 0){
                    initCarData()
                }else{
                    layer.msg(r.msg)
                }
            })
            return false;
        })

        //点击添加按钮的弹出
        function rentAdd() {
            rentIndex = layer.open({
                type:1
                ,title:"添加出租"
                ,area:['700px','500px']
                ,content:$('#saveOrUpdateDiv')
            })
            //清除表单的内容
            $("#dataFrm").get(0).reset()
            $("#rentNumber").val("")
            form.render()

            title = "添加"

            $("#rentNumberInput").removeAttr("readonly")
        }

        //给弹出层的form表单submit按钮添加点击事件
        form.on('submit(doSubmit)',function (obj) {
            layer.confirm("您确定要"+title+"吗？",function () {
                $.post("${pageContext.request.contextPath}/business/rent/rentAdd",obj.field,function (r) {
                    if(r.code == 0){
                        layer.msg(r.msg,{
                            offset:'15px'
                            ,icon:1
                            ,time:1000
                        },function () {
                            //关闭当前弹出框
                            layer.close(rentIndex)
                            //刷新table
                            rentTab.reload({
                                page:{curr:1}
                            })
                        });
                    }else{
                        layer.msg(r.msg)
                    }

                })
            })
            return false;
        })

        //监听行工具栏
        table.on('tool(rentTableFilter)',function (obj) {
            if(obj.event == "rentCar"){
                rentCar(obj.data)
            }else if(obj.event == "viewImg"){
                viewImg(obj.data)
            }
        })

        function rentCar(data) {
            rentIndex = layer.open({
                type:1
                ,title:"汽车出租"
                ,area:['700px','500px']
                ,content:$('#saveOrUpdateDiv')
                ,success:function (index,layero) {
                    //给时间控件赋值
                    laydate.render({
                        elem:'#beginDate'
                        ,value:new Date()
                        ,type:'datetime'
                    })
                    laydate.render({
                        elem:"#returnDate"
                        ,type:"datetime"
                    })
                }
            })
            //返回出租单号
            $.post("${pageContext.request.contextPath}/business/rent/rentCodeJson",function (r) {
                $('[name="rentId"]').val(r)
            })

            //身份证
            $("#identity1").val($("#identity").val())

            //车牌号出租价格
            $('[name="carNumber"]').val(data.carNumber)
            $('[name="price"]').val(data.rentPrice)
            $("[name=\"openName\"]").val($("#loginUsername").val())
        }

    })
</script>
</body>
</html>

